<template>
  <VDialogContent
    @submit="submit"
    title="模板导入"
    @close="emit('close')"
  >
    <NScrollbar>
      <div class="content">
        <div class="uploadBox">
          <div style="width: 50rem">附件</div>
          <NUpload
            multiple
            :custom-request="(e: any) => commonUpload(e)"
            @remove="(e: any) => commonRemove(e)"
            :default-file-list="imgList"
            style="width: 500rem"
            accept=".xls,.xlsx"
          >
            <NUploadDragger style="height: 150rem; background-color: none">
              <NIcon
                size="48"
                :depth="3"
              >
                <ArchiveIcon />
              </NIcon>
              <NText style="display: block; margin-top: 20rem">
                点击或者拖拽文件到该区域来上传
              </NText>
            </NUploadDragger>
          </NUpload>
        </div>
      </div>
    </NScrollbar>
  </VDialogContent>
</template>

<script setup lang="ts">
import { NScrollbar, cardProps, NUpload, NUploadDragger, NText, useMessage, NIcon } from 'naive-ui'
import { sendRequest } from '@/utils/api'
import { ref } from 'vue'
import { type PropType } from 'vue'
import { ArchiveOutline as ArchiveIcon } from '@vicons/ionicons5'
import type { UploadFileInfo, UploadCustomRequestOptions } from 'naive-ui'
import VDialogContent from './DialogContent.vue'

const props=defineProps({
  ...cardProps,
  id: [String] as PropType<string|string[]>
})
const emit = defineEmits<{
  (event: 'close'): void
  (event: 'update'): void
  (event: 'getTableValue', e: any): void
}>()
const message = useMessage()

//文件上传
const imgList = ref<UploadFileInfo[]>([])
const commonUpload = async ({
  file,
  onFinish,
  onError,
  onProgress
}: UploadCustomRequestOptions) => {
  if (
    file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
    file.type === 'application/vnd.ms-excel'
  ) {
    const fileData = new FormData()
    fileData.append('file', file.file as File)
    console.log(fileData.get('file'))
    const [error, res] = await sendRequest({
      module: 'clue',
      api: 'importCollectingItems',
      override: {
        data: {file:fileData.get('file'),dataId:props.id},
        onUploadProgress(v: any) {
          onProgress({ percent: v.progress })
        }
      }
    })
    if (error) return message.error(error.message)
    if (res.code !== 0) {
      if(res.code===500){
        return message.error('只能导入模板文件！请重新上传'), onError()
      }else{
        return message.error('上传文件失败'), onError()
      }
    }
    emit('getTableValue', res.data)
    message.success('上传文件成功')
    onFinish()
  } else {
    return message.error('只能上传excel文件，请重新选择！')
  }
}
// 删除附件
async function commonRemove({ file }: { file: UploadFileInfo; fileList: Array<UploadFileInfo> }) {
  const index = imgList.value.findIndex((e: any) => e.name === file.name)
  imgList.value.splice(index, 1)
}

async function submit() {
  emit('update')
  emit('close')
}
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.form_content {
  width: 100%;
  height: 100%;
  padding: 0 20rem 0rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    height: 64rem;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 0 20rem 0rem;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 20rem 0 180rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 130rem;
        background: #e1e1e1;
        padding: 15rem 20rem;

        .userBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: auto;
          min-width: 150rem;
          height: 40rem;
          background-color: #fff;
          border-radius: 4rem;
          padding: 0 10rem;
          margin-right: 20rem;
        }
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

.draggerBox {
  width: 280rem;
  height: 84rem;
  border-radius: 4rem;
  border: 1rem solid #3d90cc;
  background: transparent;
}

.uploadBox {
  display: flex;
}
</style>
